<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:common="http://www.contact.common.com/contacts/ui"
              xmlns:core="http://www.contact.core.com/contacts/core/ui"
        >
    <a4j:region renderRegionOnly="true">
        <h:selectBooleanCheckbox id="onlineStatusCheckBox" style="vertical-align:middle;" value="#{friendsSessionBean.status}">
            <a4j:support event="onclick" action="#{friendsSessionBean.changeOnlineStatus}" reRender="#{rich:clientId('onlineStatusLabel')}, #{rich:clientId('friendsList')}, #{rich:clientId('form_friendsRoomsList')}"/>
        </h:selectBooleanCheckbox>
        <h:outputLabel id="onlineStatusLabel" for="#{rich:clientId('onlineStatusCheckBox')}" value="#{friendsSessionBean.status ? resources.friendsonlineOnlineLabel : resources.friendsonlineOfflineLabel} "/>

    <rich:separator height="1px" width="100%" lineType="solid"/>

    <style type="text/css">
            table.noborder td {
                border: 0px;
            }
    </style>

    <rich:dataTable id="friendsList"
                    value="#{friendsSessionBean.onlineFriends}"
                    var="onlineFriend"
                    width="100%"
                    styleClass="noborder"
                    onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                    onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
            >
            <rich:column filterExpression="#{onlineFriend.online and onlineFriend.onlineStatus and friendsSessionBean.active}">
                <core:pictureForView pictureKey="photoprofile_#{onlineFriend.info.id}"
                                     style="width:30px;height:30px"
                        informationId="#{onlineFriend.info.id}"/>
            </rich:column>
            <rich:column style="width:100%; cursor:pointer">
                <h:outputText value="#{onlineFriend.info.firstName} #{onlineFriend.info.lastName}"/>
            </rich:column>
        <a4j:support event="onRowClick" action="#{createChatBean.createQuickRoom}">
            <f:setPropertyActionListener value="#{onlineFriend.info.mailId}" target="#{createChatBean.invitedUserMail}"/>
        </a4j:support>
    </rich:dataTable>
  </a4j:region>
</ui:component>